<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { CardProps } from "./Card";

    const props: CardProps = $props();
    const classList = $derived(
        useClassList(props, "cm-card", {
            "cm-card-bordered": props.bordered ?? true,
            "cm-card-rised": props.rised,
            [`cm-card-${props.size}`]: props.size,
        })
    );
</script>

<div class={classList} style={props.style}>
    {#if props.title}
        <div class="cm-card-head" style={props.headStyle}>
            {#if typeof props.title === "function"}
                {@render props.title()}
            {:else}
                {props.title}
            {/if}
        </div>
    {/if}
    {#if props.cover}
        <div class="cm-card-cover">
            {@render props.cover()}
        </div>
    {/if}
    <div class="cm-card-body" style={props.bodyStyle}>
        {@render props.children?.()}
    </div>
    {#if props.footer}
        <div class="cm-card-footer">{@render props.footer()}</div>
    {/if}
</div>
